<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article-list</title>
</head>
<body>
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    首页
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}
    {% for article in articles %}
        <!-- 标题图 -->
        {% if article.avatar %}
            <div class="col-3">
                <img src="{{ article.avatar.url }}"
                     alt="avatar"
                     style="max-width:100%; border-radius: 20px"
                >
            </div>
        {% endif %}
    {% endfor %}
    <!-- 标签 -->
    <span>
    {% for tag in article.tags.all %}
        <a href="{% url 'article:article_list' %}?tag={{ tag }}"
           class="badge badge-secondary"
        >
            {{ tag }}
        </a>
    {% endfor %}
</span>

    <!-- 定义放置文章标题的div容器 -->
    <div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'article:article_list' %}">
                    最新
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'article:article_list' %}?order=total_views">
                    最热
                </a>
            </li>
        </ol>
    </nav>
    <!-- 新增，搜索栏 -->
    <div class="row">
        <div class="col-auto mr-auto">
            <form class="form-inline">
                <label class="sr-only">content</label>
                <input type="text"
                       class="form-control mb-2 mr-sm-2"
                       name="search"
                       placeholder="搜索文章..."
                       required
                >
            </form>
        </div>
    </div>
    <!-- 新增，搜索提示语 -->
    {% if search %}
        {% if articles %}
            <h4><span style="color: red">"{{ search }}"</span>的搜索结果如下：</h4>
            <hr>
        {% else %}
            <h4>暂无<span style="color: red">"{{ search }}"</span>有关的文章。</h4>
            <hr>
        {% endif %}
    {% endif %}
    <div class="row mt-2">

        {% for article in articles %}
            <!-- 文章内容 -->
            <div class="col-4 mb-4">
                <!-- 卡片容器 -->
                <div class="card h-100">
                    <!-- 标题 -->
                    <h4 class="card-header">{{ article.title }}</h4>
                    <!-- 摘要 -->
                    <div class="card-body">
                        <p class="card-text">{{ article.body|slice:'100' }}...</p>
                    </div>
                    <!-- 注脚 -->
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">阅读本文</a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock content %}
<div class="card-footer">
    <!-- 已有代码 -->
    <a href="{% url 'article:article_detail' article.id %}"
       class="btn btn-primary">
        阅读本文
    </a>

    <!-- 显示浏览量 -->
    <span>
        <small class="col align-self-end" style="color: gray;">
            浏览: {{ article.total_views }}
        </small>
    </span>

</div>

<!-- 页码导航 -->
<div class="pagination row">
    <div class="m-auto">
        <span class="step-links">
            <!-- 如果不是第一页，则显示上翻按钮 -->
            {% if articles.has_previous %}
                <a href="?page=1" class="btn btn-success">
                    &laquo; 1
                </a>
                <span>...</span>
                <a href="?page={{ articles.previous_page_number }}"
                   class="btn btn-secondary"
                >
                    {{ articles.previous_page_number }}
                </a>
            {% endif %}

            <!-- 当前页面 -->
            <span class="current btn btn-danger btn-lg">
                {{ articles.number }}
            </span>

            <!-- 如果不是最末页，则显示下翻按钮 -->
            {% if articles.has_next %}
                <a href="?page={{ articles.next_page_number }}"
                   class="btn btn-secondary"
                >
                    {{ articles.next_page_number }}
                </a>
                <span>...</span>
                <a href="?page={{ articles.paginator.num_pages }}"
                   class="btn btn-success"
                >
                    {{ articles.paginator.num_pages }} &raquo;
                </a>
            {% endif %}
        </span>
    </div>
</div>
</body>
</html>